import ReactEcharts from 'echarts-for-react'
import * as echarts from 'echarts'
import merge from 'lodash.merge'
import clonedeep from 'lodash.clonedeep'

import '../tooltip.less'

const CircleBar: React.FC = (props: object) => {
  const defaultSeries: any = {
    // 普通线条
    normal: {
      type: 'bar',
      coordinateSystem: 'polar',
      showBackground: true,
      roundCap: true,
      color: '#47A4F8',
    },
  }
  const defaultOption: any = {
    normal: {
      polar: {
        center: ['50%', '50%'],
        radius: ['85%', '100%'],
      },
      tooltip: {
        show: false,
      },
      angleAxis: {
        max: 100,
        startAngle: 90,
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      radiusAxis: {
        type: 'category',
        data: ['a'],
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    },
  }
  const mergeOption = (option: any = {}) => {
    const newOption = merge(
      {},
      defaultOption[option.styleType || 'normal'],
      option,
    )
    return newOption
  }

  const mergeSerie = (serie: any = {}) => {
    const newSerie = merge(
      {},
      defaultSeries[serie.styleType || 'normal'],
      serie,
    )
    return newSerie
  }

  const chartOptionMerge = () => {
    const propsOption = props.option || {}
    if (propsOption.series && propsOption.series.length) {
      propsOption.series = propsOption.series.map((item: any) => {
        item = mergeSerie(item)
        return item
      })
    }
    const option = mergeOption(propsOption)
    return option
  }
  return (
    <ReactEcharts
      echarts={echarts}
      {...props}
      option={clonedeep(chartOptionMerge())}
    />
  )
}

export default CircleBar
